<template>
  <el-pagination
    v-model:current-page="currentPage"
    v-model:page-size="pageSize"
    v-bind="defaultOption"
    :total="total"
  />
</template>

<script lang='ts' setup>
import { reactive, ref, watch } from 'vue';
import type { paginationType } from '../TableType';

const props = defineProps<{
  paginationOption: paginationType
}>()

const emits = defineEmits<{
  (e: 'search'): void
}>()

const defaultOption = reactive({
  layout: "total, sizes, prev, pager, next",
  pageSizes: [10, 20, 50, 100],
  ...(props.paginationOption?.option ? props.paginationOption.option : {})
})

// 当前页码
const currentPage = ref(1)
// 当前页limit
const pageSize = ref(20)

const total = ref(0)

/**
 * limit 改变事件
 */
watch(pageSize, () => {
  currentPage.value = 1
})

/**
 * page 改变事件
 */
watch(currentPage, () => {
  emits('search')
})

/**
 * 设置总数
 * @param num 总数
 */
const setTotal = (num: number) => {
  total.value = num
}

defineExpose({
  setTotal,
  page: currentPage,
  limit: pageSize
})
</script>

<style scoped lang='scss'></style>